/**
 * 卡片布局的面板
 * @param id
 * @param styleClass
 * @param headerstyleClass
 * @param index
 * @param title
 * @param titlePos : 0表示左，其它表示右
 * @returns {CardPane}
 */
function CardPane(id, styleClass, headerstyleClass, index,title,titlePos) {
	this.index = index;
	this.cards = new Array();
	this.buttons = new Array();
	this.type = 0;
	// /////////////////////////////////////

	this.div = document.createElement('div');
	this.div.id = id;
	this.div.className = styleClass;
	this.header = document.createElement('div');
	this.header.className = headerstyleClass;

	var t = document.createElement('div');
	if(titlePos == undefined || titlePos == null || titlePos == 0){
		this.header.style.textAlign = 'left';
		t.style.float = 'right';
	} else {
		this.header.style.textAlign = 'right';
		t.style.float = 'left';
	}
	t.innerHTML = title == undefined ? null : title;
	this.header.appendChild(t);
	this.div.appendChild(this.header);
	// ///////////////////////////////////
	this.getType = function() {
		return this.type;
	};
	this.setType = function(type) {
		this.type = type;
	};
	// ///////////////////////////////////
	this.getIndex = function() {
		return this.index;
	};
	this.getCurrentCard = function() {
		return this.cards[this.index];
	};
	this.getCard = function(index) {
		return this.cards[index];
	};
	this.getButton = function(index) {
		return this.buttons[index];
	};
	this.getCurrentButton = function() {
		return this.buttons[this.index];
	};
	this.getCards = function() {
		return this.cards;
	};
	this.getButtons = function() {
		return this.buttons;
	};
	// ///////////////////////////////////
	this.refresh = function(index) {
		for ( var i = 0; i < this.cards.length; i++) {
			this.cards[i].div.style.display = 'none';
			this.buttons[i].button.style.background = 'rgb(200,200,200)';
		}
		this.cards[index].div.style.display = 'block';
		this.buttons[index].button.style.background = 'rgb(240,240,240)';
	};
	this.addCard = function(index, styleClass, buttonText, buttonStyleClass,
			content) {
		var b = new CardButton('$_Button_' + index, buttonStyleClass,
				buttonText);
		var c = new CardPanel('$_Card_' + index, styleClass, content);
		b.button.name = index;
		b.button.p = this;
		b.button.onmouseover = function() {
			if (this.p.getType() == 0) {

			}
			this.p.refresh(this.name);
		};
		b.button.onmouseout = function() {
			this.p.refresh(this.name);
		};
		this.buttons[index] = b;
		this.cards[index] = c;
		this.header.appendChild(b.button);
		this.div.appendChild(c.div);
		this.refresh(this.index);
	};
	this.setCardContent = function(index, content) {
		var c = this.getCard(index);
		if (c instanceof CardPanel)
			c.setContent(content);
	};
	this.removeCard = function(index){;};
	this.removeAll = function() {
		buttons = new Array();
		cards = new Array();
	};
}

/**
 * 卡片按钮类
 * 
 * @param id
 * @param styleClass
 * @param text
 * @returns {CardButton}
 */
function CardButton(id, styleClass, text) {
	this.button = document.createElement('button');
	this.button.className = styleClass;
	this.button.id = id;
	this.button.innerHTML = text;
	this.setText = function(text) {
		this.button.innerHTML = text;
	};
}

/**
 * 卡片面板类
 * 
 * @param id
 * @param styleClass
 * @param content
 * @returns {CardPanel}
 */
function CardPanel(id, styleClass, content) {
	this.div = document.createElement('div');
	this.div.className = styleClass;
	this.div.id = id;
	this.div.style.display = 'none';
	this.div.innerHTML = content;
	this.setContent = function(content) {
		this.div.innerHTML = content;
	};
}

// ///////////////////////////////////////////////////////////
function Navigation(styleClass, topButtonStyleClass, navButtonStyleClass) {
	this.styleClass = styleClass;
	this.tbStyleClass = topButtonStyleClass;
	this.nbStyleClass = navButtonStyleClass;
	this.div = document.createElement('div');
	this.navDiv = document.createElement('div');

	this.topButton = document.createElement('button');
	this.navButton = document.createElement('button');
	// ////////////////////////////////
	if (topButtonStyleClass != null) {
		this.topButton.className = topButtonStyleClass;
	} else {
		with (this.topButton.style) {
			height = '20px';
			width = '50px';
			fontSize = '12px';
			fontWeight = 'bold';
			borderStyle = 'solid';
			borderWidth = '1px';
			borderColor = 'rgb(210,210,210)';
			background = 'rgb(230,230,230)';
			cursor = 'pointer';
		}
	}
	if (navButtonStyleClass != null) {
		this.navButton.className = navButtonStyleClass;
	} else {
		;
	}
	// ///////////////////////////////
	this.topButton.onmouseover = function() {;
	};
	this.topButton.onclick = function() {;
	};

	this.navButton.onmouseover = function() {;
	};
	this.navButton.onclick = function() {;
	};

	this.div.appendChild(this.navButton);
	this.div.appendChild(this.navDiv);
	this.div.appendChild(this.topbutton);
	// ////////////////////////////////////
	this.addNavItem = function(navShowText, navObjectId) {
		;
	};
	this.removeNavItem = function(index) {;
	};
}
function NavItem(styleClass, navShowText, navObjectId) {
	this.button = document.createElement('button');
	this.button.innerHTML = navShowText;
	this.navObjectId = navObjectId;
	if (styleClassstyleClass != null) {
		this.button.className = styleClass;
	} else {
		with (this.button.style) {
			height = '20px';
			width = '50px';
			fontSize = '12px';
			fontWeight = 'bold';
			borderBottomStyle = 'solid';
			borderWidth = '1px';
			borderColor = 'rgb(220,220,220)';
			background = 'rgb(240,240,240)';
			cursor = 'pointer';
		}
	}
	this.button.onmouseover = function() {
		this.background = 'rgb(255,255,255)';
	};
	this.button.onmouseout = function() {
		this.background = 'rgb(240,240,240)';
	};
	this.button.onclick = function() {
		this.background = 'rgb(100,100,100)';
	};
}

//////////////////////////////////////////////////////

/**
 * 分页条类
 * 
 * @param index
 * @param size
 * @param totalSize
 * @param action
 * @param cellStyleClass
 * @param activeStyleClass
 * @returns {PageBar}
 */
function PageBar(index,size,totalSize,action,cellStyleClass,activeStyleClass){
	
	this.bar = document.createElement('table');
	var tr = document.createElement('tr');
	this.bar.appendChild(tr);
	var pageSize = Math.ceil(totalSize / size);
	var currentPageIndex = Math.ceil(index / size);
	tr.appendChild(new Cell(0,'首页',action,cellStyleClass).td);
	var cell = new Cell(index - size,'上一页',action,cellStyleClass);
	if(index > 0)
		tr.appendChild(cell.td);
	
	for(var i = currentPageIndex - 5; i < currentPageIndex + 5 && i < pageSize; i++ ){
		if(i < 0)
			continue;
		if(i != currentPageIndex)
			tr.appendChild(new Cell(size * i,(i + 1),action,cellStyleClass).td);
		else 
			tr.appendChild(new Cell(size * i,(i + 1),action,cellStyleClass,true).td);
	}

	cell = new Cell(((index - 0) + (size - 0)),'下一页',action,cellStyleClass);
	if(currentPageIndex < pageSize - 1)
		tr.appendChild(cell.td);
	tr.appendChild(new Cell((pageSize - 1) * size,'尾页',action,cellStyleClass).td);
	
	function Cell(index,content,action,cellStyleClass,isCurrent){
		this.td = document.createElement('td');
		var a = document.createElement('a');
		this.td.appendChild(a);
		if(cellStyleClass != null)
			this.td.className = cellStyleClass;
		a.innerHTML = content;
		a.href = action + "&i=" + index;
		if(isCurrent){
			this.td.style.fontWeight = 'bold';
			a.style.color = 'red';
		}
		this.setVisible = function(isVisible){
			if(isVisible)
				this.td.style.display = 'block';
			else 
				this.td.style.display = 'none';
		};
		this.valueOf = function(){
			return this.td.innerHTML;
		};
	}
}